<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 控制面板</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .password-form {
            margin-top: 20px;
            max-width: 600px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .password-rules {
            margin-top: 20px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }
        .password-rules h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        .password-rules ul {
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>控制面板</h2>
            </div>
            <ul class="sidebar-menu">
                <li><a href="/dashboard">主页</a></li>
                <li><a href="/dashboard/profile">个人信息</a></li>
                <li class="active"><a href="/dashboard/change-password">修改密码</a></li>
                <li><a href="/dashboard/documents">文档管理</a></li>
                <li><a href="/dashboard/categories">分类管理</a></li>
                <li><a href="/dashboard/weblinks">网站链接管理</a></li>
                <li><a href="/dashboard/users">用户管理</a></li>
                <li><a href="/dashboard/settings">网站设置</a></li>
                <li><a href="/danmaku-display">弹幕墙</a></li>
                <li><a href="/weblinks" target="_blank">网站导航</a></li>
                <li><a href="/" target="_blank">访问首页</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <h1>修改密码</h1>
                </div>
            </div>
            
            <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
            <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>
            
            <form action="/dashboard/change-password" method="post" th:object="${passwordChangeDto}" class="password-form">
                <div class="form-group">
                    <label for="currentPassword">当前密码</label>
                    <input type="password" id="currentPassword" name="currentPassword" th:field="*{currentPassword}" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <label for="newPassword">新密码</label>
                    <input type="password" id="newPassword" name="newPassword" th:field="*{newPassword}" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">确认新密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" th:field="*{confirmPassword}" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">修改密码</button>
                </div>
                
                <div class="password-rules">
                    <h3>密码要求</h3>
                    <ul>
                        <li>至少8个字符</li>
                        <li>包含至少一个大写字母</li>
                        <li>包含至少一个小写字母</li>
                        <li>包含至少一个数字</li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    
    <script src="/js/script.js"></script>
</body>
</html> 